<template>
  <div class="mui-content mh-container">
    <mh-header headName="互动" :showBack="showBack"> </mh-header>
    <div class="mui-segmented-control mh-segmented">
      <a class="mui-control-item mui-active" @tap="handleCondition(1)"><span>全部</span></a>
      <a class="mui-control-item" @tap="handleCondition(2)"><span>筛选</span></a>
      <a class="mui-control-item" @tap="handleCondition(3)"><span>地图</span></a>
      <a class="mui-control-item" @tap="handleCondition(4)"><span>订阅</span></a>
    </div>
    <div class="mui-segmented-control mh-segmented sub-control" v-show="activeFilter === 1">
      <a :class='time_type==1 ? "mui-control-item mui-active" : "mui-control-item"' href="javascript:" @tap='getTimeType(1)'><span>最近互动</span></a>
      <a :class='time_type==2 ? "mui-control-item mui-active" : "mui-control-item"' href="javascript:" @tap='getTimeType(2)'><span>过期互动</span></a>
    </div>
    <div v-show="activeFilter === 2" class="filter-con">
      <div class="flex-bt">
        <a href="javascript:" @tap="handleSubFilter(1)">
          <span>互动内容</span>
          <span class="mh-arrow-down"></span>
        </a>
        <a href="javascript:" @tap="handleSubFilter(2)">
          <span>红娘级别</span>
          <span class="mh-arrow-down"></span>
        </a>
        <a href="javascript:" @tap="handleSubFilter(3)">
          <span>筛选</span>
          <img class="ic-filter" src="../../assets/images/ico/ic_in_filter.png" alt="筛选">
        </a>
      </div>

      <div class="filt-con-layer">
        <!--筛选-互动内容-->
        <transition name="slide-fade" mode="out-in">
          <ul class="mui-table-view mui-table-view-radio" v-show="filterSubFilter === 1">
            <li class="mui-table-view-cell" v-for="item in filterCon.interactContent">
              <a class="mui-navigate-right" @click='getType(item.value)'>
                {{item.name}}
              </a>
            </li>
          </ul>
        </transition>
        <!--筛选-红娘级别-->
        <transition name="slide-fade" mode="out-in">
          <ul class="mui-table-view mui-table-view-radio" v-show="filterSubFilter === 2">
            <li class="mui-table-view-cell" v-for="item in filterCon.matcherLevel">
              <a class="mui-navigate-right" @click='getLevel(item.value)'>
                {{item.level}}
              </a>
            </li>
          </ul>
        </transition>
      </div>
    </div>
    <div class="mui-segmented-control mh-segmented sub-control" v-show="activeFilter === 4">
      <a :class='time_type==1 ? "mui-control-item mui-active" : "mui-control-item"' href="javascript:" @click='getTimeType(1)'><span>最近互动</span></a>
      <a :class='time_type==2 ? "mui-control-item mui-active" : "mui-control-item"' href="javascript:" @click='getTimeType(2)'><span>过期互动</span></a>
      <a :class='establish==1 ? "mui-control-item mui-active" : "mui-control-item"' href="javascript:" @click='getMyActive()'><span>我的互动</span></a>
    </div>
    <!--筛选-所有start-->
    <transition name="list">
      <div class="filter-con-all" v-show="filterSubFilter === 3">
        <div class="con-all-inner">
          <div class="con-item" v-for="(item, index) in filterLayer">
            <h4 v-text="item.title">筛选条件</h4>
            <ul>
              <li v-for="(subItem, subIndex) in item.types" :class="{active: subItem.active}" @click='getActive(index, subIndex)'>
                <a href="javascript:" v-text="subItem.name">--</a>
              </li>
            </ul>
          </div>
          <div class="mui-content-padded mui-text-center">
            <button type="button" class="mh-btn mh-btn-md" @tap="confirmFilter">确定</button>
          </div>
        </div>
      </div>
    </transition>
    <!--筛选-所有end-->
    <div class="control-cont-wrap">
      <div class="filter-backdrop" v-show="filterSubFilter === 1 || filterSubFilter === 2"></div>
      <router-view ref='child' />
    </div>
    <tab-menu :activeTab="activeFootTab"> </tab-menu>
  </div>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  import TabMenu from '@/components/tab-menu/tab-menu'
  export default {
    name: "explore",
    data () {
      return {
        showBack: false,
        activeFootTab: 1,
        activeFilter: 1,
        filterSubFilter: 0,
        filterCon: {
          interactContent: [
            {
              name: '旅游',
              value: '0'
            },
            {
              name: '聚餐',
              value: '1'
            },
            {
              name: '狼游',
              value: '2'
            },
            {
              name: '品茶',
              value: '3'
            }
          ],
          matcherLevel: [
            {
              level: '金牌红娘',
              type: 1
            },
            {
              level: '银牌红娘',
              type: 2
            },
            {
              level: '铜牌红娘',
              type: 3
            },
            {
              level: '入门红娘',
              type: 4
            }
          ]
        },
        filterLayer: [
          // {
          //   title: '互动距离',
          //   types: [
          //     {
          //       name: '全部',
          //       value: '0',
          //       active: true
          //     },
          //     {
          //       name: '离我最近',
          //       value: '1'
          //     },
          //     {
          //       name: '离家最近',
          //       value: '2'
          //     },
          //     {
          //       name: '离公司最近',
          //       vallue: '3'
          //     }
          //   ],
          // },
          {
            title: '互动人数',
            types: [
              {
                name: '全部',
                value: '0',
                active: true
              },
              {
                name: '10人',
                value: '1',
                active: false
              },
              {
                name: '20人',
                value: '2',
                active: false
              },
              {
                name: '30人',
                value: '3',
                active: false
              },
              {
                name: '30人以上',
                value: '4',
                active: false
              }
            ]
          },
          {
            title: '红娘类型',
            types: [
              {
                name: '全部',
                value: '0',
                active: true
              },
              {
                name: '车友',
                value: '1',
                active: false
              },
              {
                name: '校友',
                value: '2',
                active: false
              },
              {
                name: '老乡',
                value: '3',
                active: false
              },
              {
                name: '区域',
                value: '4',
                active: false
              },
              {
                name: '企业',
                value: '5',
                active: false
              },
              {
                name: '红娘',
                value: '6',
                active: false
              }
            ]
          },
          {
            title: '互动时间',
            types: [
              {
                name: '全部',
                value: '0',
                active: true
              },
              {
                name: '最近互动',
                value: '1',
                active: false
              },
              {
                name: '过期互动',
                value: '2',
                active: false
              },
              {
                name: '30天以内',
                value: '3',
                active: false
              }
            ]
          }
        ],
        curDistance: '1',
        curPeople: '',
        cueMatcher: '',
        curTime: '',
        time_type: 1,
        type: '',
        hong_level: '',
        hong_type: '',
        person: 0,
        establish: '', //我创建
        sign_up: '' //已报名
      }
    },
    created () {
    },
    methods: {
      handleCondition (i) {
        //重置
        this.time_type = 1;
        this.type = '';
        this.hong_level = '';
        this.hong_type = '';
        this.person = 0;
        this.establish = '';
        this.sign_up = '';

        this.filterSubFilter = 0;
        this.activeFilter = i;
        if (i === 3) {
          this.$router.replace({
            path: '/interact/map'
          })
        }else {
          this.$router.replace({
            path: '/interact/all'
          })
          if(i===4){
            this.sign_up = 1;
          }
        }
        this.getData();
      },
      handleSubFilter (i) {
        this.filterSubFilter = i;
      },
      confirmFilter () {
        this.filterSubFilter = 0;
        this.getData();
      },
      getTimeType(type){
        this.time_type = type;
        this.getData();
      },
      getType(val){
        this.type = val;
        this.getData();
        this.filterSubFilter = 0;
      },
      getLevel(val){
        this.hong_level = val;
        this.getData();
        this.filterSubFilter = 0;
      },
      getActive(index, subIndex){
        let newArr = this.filterLayer[index].types;
        for(let i=0, len=newArr.length;i<len;i++){
          this.filterLayer[index].types[i].active = false;
        }
        this.filterLayer[index].types[subIndex].active = true;
        if(index==0){
          this.person = this.filterLayer[index].types[subIndex].value;
        }
        else if(index==1){
          this.hong_type = this.filterLayer[index].types[subIndex].value;
        }
        else if(index==2){
          this.time_type = this.filterLayer[index].types[subIndex].value;
        }
      },
      getMyActive(){
        this.establish = 1;
        this.time_type = '';
        this.getData();
      },
      getData(){
        this.$refs.child.getData(this.time_type, this.type, this.hong_level, this.hong_type, this.person, this.sign_up, this.establish);
      }
    },
    components: {
      TabMenu,
      MhHeader
    }
  }
</script>

<style lang="scss" scoped>
  .mui-content {
    padding-top: 4.5rem;
    padding-bottom: 5rem;
    background: #f2f2f2;
  }
  .mh-segmented {
    padding: 0 3.5rem;
    background: #fff;
    border: 0;
    font-size: 1.5rem;
    z-index: 9;
  }
  .mui-segmented-control.sub-control .mui-control-item {color: #333;}
  .sub-control {
    padding: 0 4rem;
    font-size: 1.3rem;
    .mui-control-item.mui-active span {border-bottom: 0; color: #dd65a1;}
  }
  .filter-con {
    position: relative;
    padding: .8rem 4.5rem;
    background: #fff;
    text-align: center;
    font-size: 1.2rem;
    z-index: 9;
  }
  .ic-filter {width: 1rem;}
  .filt-con-layer {
    position: absolute;
    padding: 0 4.5rem;
    left: 0;
    right: 0;
    z-index: 99;
    background: #fff;
    .mui-table-view:before {background-color: #fff;}
    .mui-table-view-cell {
      padding-left: 0;
      text-align: left;
      a {margin-left: 0;}
    }
  }
  .filter-backdrop {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 5rem;
    background-color: rgba(0,0,0,.3);
    z-index: 8;
  }
  .filter-con-all {
    position: fixed;
    background-color: rgba(0,0,0,.6);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 99;
  }
  .con-all-inner {
    width: 76.4%;
    height: 100%;
    padding: 1rem 1rem 5rem;
    background-color: #fff;
    float: right;
    ul {margin-top: .5rem;}
    h4 {
      margin-top: .5rem;
      margin-bottom: .5rem;
      padding-bottom: .4rem;
      font-size: 1.4rem;
    }
    li {
      display: inline-block;
      margin-right: .6rem;
      margin-bottom: .9rem;
      padding: .5rem 1.2rem;
      background-color: #f2f2f2;
      font-size: 1.3rem;
      &.active {
        background-color: #fbdde5;
        a {color: #eb537f;}
      }
    }
  }
</style>
